<div id="body" class="none" >
	<script type="text/javascript">
		loadeJs('./js/ImgBox.js', 'ImgBoxPage', function() {
			console.log('./js/ImgBox.js loaded');
		});
		</script>
	<script>
		var productContent = "";
		var curentPage = 1; 
		var productItemsContent = new Array();
		<?php 
		$desc->printJS($_GET['page'], "productContent");
		if(isset($_GET['description'])){
			print "var currentPages = 'description';\n";
		} else {
			print "var currentPages = 'hire';\n";
		}			
		?>
		function editDesc() {
			query("admin&action=get_desc&desc=terms_of_rental&uid=" + UserData.uid, function(data) {
				HtmlBox.open(data.content, function() {	
					window.location.reload()
				});
			});
		}
		
		if(UserData.isAdmin){
			productContent += "</br> <a class='enable' href='javascript:' onclick='editDesc()'>Edit</a>";
		}
		
		function getProductItemsContent(){
			return getProductItemsContent(null);
		}
		
		function getProductItemsContent(callback) {
			query("product_items&action=rental_items", function(data){
				if(typeof data == 'string'){
					productItemsContent = JSON.parse(data);
				} else {
					productItemsContent = data;
				}
				if(callback!=null) {
					callback(productItemsContent);
				}
				return productItemsContent;
			});
		}
		var prevPage;
		function reloadTab(useCache) {
			console.log(typeof useCache);
			if(useCache != null && useCache == false){
				productItemsContent = new Array();
		}
			openTab(prevPage);
		}
		
		function openTab(page){
			prevPage = page;
			if(page=='description'){
				$('#body_box').html(productContent);
			} else {
				$('#body_box').html('');
				if($('#img_box_con') == null || $('#img_box_con').length==0){
					$('#body_box').append('<div id="img_box_con">');
					$('#body_box').append('<div id="pagination">');
				}
				var type = "all";
				if(page.split("itemsType").length >=2){
					type = page.split("itemsType")[1].split("&")[0].replace("=", "");
				}
				if(productItemsContent[type]){
					createProductItemsContent(productItemsContent[type]);
				} else {
					query("product_items&action=rental_items&" + page, function(data){
						if(typeof data == 'string'){
							productItemsContent[type] = JSON.parse(data);
						} else {
							productItemsContent[type] = data;
						}
						createProductItemsContent(productItemsContent[type]);
					});
				}
			}
		}
		function createPagination(completeItemsContent){
			$('#pagination').append('<div id="pagination">');
				
			}
		function createProductItemsContent(completeItemsContent){
			createPagination(completeItemsContent);
			var page = 0;
			if(completeItemsContent.length >20 && curentPage>1){
				var selectableClassA;
				selectableClassA = 'enable';
				$('#pagination').append(' <a id="page_prev" class="'+selectableClassA+'" href="javascript:"><<</a> ');
				$('#page_prev').click(function(){
					curentPage--;
					reloadTab(true);
				});
			}
			for(var i = 0; i < completeItemsContent.length; i++){
				if(i%20==0){
					page++; 
				}
				(function f() {
					var itemIndex = i;
					var _page = page;
					if(itemIndex%20==0){
						var selectableClassA;
						selectableClassA = curentPage == _page? 'disable':'enable'
						$('#pagination').append('<a id="page_'+itemIndex+'" class="'+selectableClassA+'" style="padding: 0 2px 0 2px;" href="javascript:">'+page+'</a>');
						$('#page_' + itemIndex).click(function(){
							curentPage = _page;
							reloadTab(true);
						});
					}
					if(curentPage == _page){
						var img_id = addImgBox(completeItemsContent[itemIndex]);
					$('#'+img_id).click(function(){
						console.log("$('#"+img_id+"').click" + itemIndex);
							console.log(completeItemsContent[itemIndex].id);
							ImgBox.open2(completeItemsContent[itemIndex].id, completeItemsContent, UserData.isAdmin);
					});
					}
				})();
			}
			
			if(page>0 && page != curentPage){
				var selectableClassA;
				selectableClassA = 'enable';
				$('#pagination').append(' <a id="page_next" class="'+selectableClassA+'" href="javascript:">>></a> ');
				$('#page_next').click(function(){
					curentPage++;
					reloadTab(true);
				});
			}
			
			var adminItem = {};
			adminItem.img = "http://img.playground.ru/images/2/3/green-plus-sign-hi.png";
			if(UserData.isAdmin){
				var btnId = addBtn(adminItem);
				console.log(btnId);
				$('#' + btnId).click(function(){
					query("admin&action=add_new_item&uid=" + UserData.uid, function(data){
						if(typeof data == 'string'){
							data = JSON.parse(data);
						}
						HtmlBox.open(data.content);
					});	
					
				});
			}
			
		}
		
		$(function(){
			var unSelectableElName = '.items_list';
			unselectElement(unSelectableElName);
			openTab(currentPages);
			
				$('.item').click(function(){
				var id = $(this).attr("id");
				if(!id){
					return;
				}
				
				var subbItemList = $(this).parent().find('.items_list.' + id);
				if(subbItemList.css("display") !== "none"){
					var lastItem;
					var _this = $(this);
					$(this).parent().find('.item').each(function(index){
						if($(this).parent()[0] === _this.parent()[0]){
							lastItem = this;
						}
					});
					if(lastItem!==this){
						$(this).removeClass('bottom');
					} else {
						$(this).addClass('bottom');
					}
					var _w = subbItemList.width();
					var _h = subbItemList.height();
					subbItemList.animate({opacity: 0, width:0, height:0}, 100, function() {
						subbItemList.css("display", "none");
						subbItemList.css("opacity", 1);
						subbItemList.css("width", _w);
						subbItemList.css("height", _h);
					});
				} else {
					$(this).addClass('bottom');
					var _w = subbItemList.width();
					var _h = subbItemList.height();
					subbItemList.css("display", "none");
					subbItemList.css("display", "none");
					subbItemList.css("opacity", 0);
					subbItemList.css("width", 0);
					subbItemList.css("height", 0);
					subbItemList.css("padding-left", "20px");
					subbItemList.animate({opacity: 1, width:'auto', height:'auto'}, 100, function() {
						subbItemList.css("display", "inline-table");
						subbItemList.find('.item').css("font-size", 12);
					});
					setTimeout(function(){
						subbItemList.parent().css("position", "inherit");
					}, 20);

				}
				//$(this).parent().find('.item, ' + id).css("display", "block");
				// subbItemList.animate({opacity: 1}, 1000, function() {
				// });
			});
		});
	</script>
	<div id="left_content" class="text_content" >
		<?php include 'left_content/'.$_GET['page'].'.php'; ?>
	</div>
	<div id="body_box" class="text_content" > 		
	</div>
	<div id="body_info" class="text_content" > 
		<table>
			<tr>
				<td><span id="login_button" onclick="VK.Auth.login(authInfo);"></span></td>
				<td><span id="vk_like"></span></td>
			</tr>
		</table>
	</div>
</div>
